<template>
  <div>
      <div class = "sousuo">
        当前列表><span v-if="this.status>0">已发货</span><span v-else>未发货</span>
        <br>
        <i-button type="info" size="small"  @click="getListInfo(1)">已发货</i-button>
        <i-button type="info" size="small"  @click="getListInfo(0)">未发货</i-button>
      </div>
      <Row class="body">
        <i-col span="3">序列号</i-col>
        <i-col span="3">收货人</i-col>
        <i-col span="3">电话</i-col>
        <i-col span="3">地址</i-col>
        <i-col span="3">pos机一</i-col>
        <i-col span="3">提交时间</i-col>
        <i-col span="3">终端号</i-col>
        <i-col span="3">操作</i-col>
      </Row>

      <Row class="list" v-for="(item,index) of userList" :key="item.id">
        <i-col span="3">{{index+1}} </i-col>
        <i-col span="3">{{item.userName}}&nbsp;</i-col>
        <i-col span="3">{{item.phone}}&nbsp;</i-col>
        <i-col span="3">{{item.sAddress}}&nbsp;</i-col>
        <i-col span="3">{{item.posName1}}&nbsp;</i-col>
        <i-col span="3">{{item.updateTime}}&nbsp;</i-col>
        <i-col span="3">{{item.terminalNumber}}&nbsp;</i-col>
        <!-- <i-col span="4">
          <select v-model="item.level" style="width:150px">
              <option v-for="item of levelList" :value="item.value" :key="item.value">
                {{item.label}}
              </option>
          </select>
        </i-col> -->
        <i-col span="3">
          <i-button v-if="item.status==0" type="info" size="small"  @click="handleUpdateManager(item.id)">确认发货</i-button>
        </i-col>
      </Row>

      <div class="page">
        <Page :total="total" :page-size="pageSize" @on-change="handlePage"></Page>
      </div>

  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: 'UserList',
  data () {
    return {
        pageSize:10,
        pageNumber:1,
        total:0,
        userList:'',
        self: this,
        username:'',
        phone:'',
        status:0,
      }
  },
  methods: {
    handlePage (res){
      console.log(res);
      axios.post('/web/api/manager/shipList',{"pageSize":this.pageSize,"page":res,"status":this.status}).then(this.getListInfoSucc)
    },
    getListInfo (status) {
      this.status = status;
      axios.post('/web/api/manager/shipList',{"pageSize":this.pageSize,"page":this.pageNumber,"status":this.status}).then(this.getListInfoSucc)
    },
    getListInfoSucc (res) {
       this.userList = res.data.date.list
       console.log("this.userList",this.userList);
       this.total = res.data.date.total

    },
    handleUpdateManager (id) {
      axios.post('/web/api/manager/shipstatus',{"id":id}).then(this.updateInfoSucc)
    },
    updateInfoSucc (res) {
      console.log('修改', res)
      this.$Message.success(res.data.message)
      this.getListInfo(0);
    },
  },
  mounted () {
    this.getListInfo(0);
  }
}
</script>
<style lang="stylus" scoped>
  .body
    width: 100%
    line-height 3
    font-size 14px
    color #2680c4
    background #eff3fa
    text-align center
  .list
    line-height 3
    font-size 14px
    text-align center
    color #2680c4
  .sousuo
    width 100%
    text-align center
    margin-top 2rem
    margin-bottom 2rem
  .page
    width 100%
    margin-top 2rem
    text-align center
</style>

